<template>
    <section>
        <goback :getName='goName' :getURL="getURL"></goback>
        <div class="rulePage" v-if="ifShowRule">
            <div class="ruleLogo">
                <div class="ruleWords">
                    <div class="ruleTitle">活动规则</div>
                    <div class="ruleContain">
                        <div class="rTitle">一、活动规则</div>
                        <div class="ruleLine">1、用户参与《好礼周周领》活动，购买极美耶明星礼盒面膜一盒。</div>
                        <div class="ruleLine">2、购买成功后，于次周起可免费领取两年礼品，礼品时时更新，每周限领一次(快递费自理)。</div>
                        <div class="ruleLine">3、购买或领取产品后，消费者均会获得消费等值（消费金、快递费）的消费积分，可在商城购买任何商品时进行抵扣，抵扣比例根据产品不同，在20%-50%区间浮动。</div>
                        <div class="ruleLine">4、成功分享好友参与本活动可获得一定奖励。</div>
                        <div class="ruleLine">5、本活动每个微信账号只限参与一次。</div>
                        <div class="rTitle rTitle2">二、奖励详情</div>
                        <div>
                            <table>
                                <tr>
                                    <td></td>
                                    <td>奖励名目</td>
                                    <td>奖励积分</td>
                                </tr>
                                <tr>
                                    <td rowspan="2">购买环节</td>
                                    <td>分享奖</td>
                                    <td>120元</td>
                                </tr>
                                <tr>
                                    <td>管理奖</td>
                                    <td>40元</td>
                                </tr>
                                <tr>
                                    <td rowspan="2">领取环节</td>
                                    <td>分享奖</td>
                                    <td>1元</td>
                                </tr>
                                <tr>
                                    <td>管理奖</td>
                                    <td>0.5元</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <img src="../../assets/mm/tc.png">
                <div class="closeBtn" @click="hiddenRule">
                    <img src="../../assets/mm/gb.png">
                </div>
            </div>
        </div>
        <div class="sharePage" v-if="ifshowQRC" @click="hiddenQRC">
            <div class="QRCLogo">
                <img src="../../assets/mm/zs.png">
            </div>
        </div>
        <div class="sharePage" v-if="ifShowShare" @click="hiddenShare">
            <div class="shareLogo">
                <div class="shareWords">
                    <div class="shareContain">
                        <div>点击 <b>···</b> 邀好友参与本活动，</div>
                        <div>即可获得120元奖励</div>
                        <div>赶快分享吧~</div>
                    </div>
                </div>
                <img src="../../assets/mm/yq.png">
            </div>
        </div>
        <div class="smallLogo">
            <div @click="rule">
                <img src="../../assets/mm/hdgz.png">
            </div>
            <div @click="record">
                <img src="../../assets/mm/lqjl.png">
            </div>
            <div class="qrc" @click="qrc" v-if="showQRC">
                <img src="../../assets/mm/egz.png">
            </div>
            
        </div>
        <div class="channelBg" v-if="showChannel">
            <div class="channel" v-if="!channelApply">
                <img src="../../assets/mm/qd.png">
                <div class="channelWords">
                    <div>恭喜您购买成功</div>
                    <div>{{price}}元消费金已返还到您的积分账户</div>
                    <div>申请代理可获得现金奖励</div>
                    <div class="channelBtn">
                        <div @click="giveUpChannel">
                            <span>暂时放弃</span>
                        </div>
                        <div @click="applyChannel">
                            <span>立即申请</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="channelApply" v-if="channelApply">
                <div class="closeButton" @click="closeButton">×</div>
                <img src="../../assets/mm/sq.png">
                <div class="channelApplyWords">
                    <div class="inputInfo">
                        <input type="text" v-model="channel.name" placeholder="请输入姓名">
                        <input type="text" v-model="channel.tel" placeholder="请输入电话">
                    </div>
                    <div>*申请成功后，登陆账号密码将发送至该手机号</div>
                    <div @click="apply">提交</div>
                </div>
            </div>
        </div>
        <div class="channelBg" v-if="showTips">
            <div class="channel">
                <img src="../../assets/mm/qd.png">
                <div class="tipWords">
                    <div>恭喜您购买成功</div>
                    <div>{{price}}元消费金已返还到您的积分账户</div>
                    <div>您已获得两年免费领好礼资格</div>
                    <div>请点击“好礼货架”领取</div>
                    <div class="channelBtn">
                        <div @click="closeTips">
                            <span>知道了</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pointsBg" v-if="showPoints" @click="closePoints">
            <div class="points">
                <img src="../../assets/mm/jf.png">
                <div class="pointsWords">
                    <div>恭喜您获得消费积分，请在“我的积分”中查看，积分可在商城购物时当现金抵扣哦！</div>
                    <div>
                        <div class="specialColor">{{points}}</div>
                        <div class="specialColor_">元</div>
                        <div class="specialColor__">消费积分</div>
                    </div>
                    <div>已经入账</div>
                    <div @click="turnPoints" @click.stop>立即查看 ></div>
                </div>
            </div>
        </div>
        <section class="bigImg">
            <div>
                <img src="../../assets/mm/01.png">
            </div>
            <div>
                <img src="../../assets/mm/02.png">
            </div>
            <div>
                <img src="../../assets/mm/03.png">
            </div>
            <div>
                <img src="../../assets/mm/04.png">
            </div>
            <div>
                <div>
                    <img src="../../assets/mm/egz.png">
                </div>
            </div>
        </section>
        <dl class="buy">
            <dd class="share" @click="share">立即分享</dd>
            <dd class="buyNow" v-if="buyOrReceive" @click="buyNow">立即参与</dd>
            <dd class="buyNow receiveBtn" v-if="!buyOrReceive" @click="receive">
                <div class="receiveTips">领取</div>
                好礼货架
            </dd>
        </dl>
    </section>
</template>
<script>
    import goback from '../../components/goback'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    import { product, isBuyMask, isThisWeekClaimMask, isBuyThisWeek, memberByXF, getClaimMaskRecord, saveLastInviter } from '../../libs/interface'
    export default {
        components: { goback, userInfoGet, WXShare, product, isBuyMask, isThisWeekClaimMask, isBuyThisWeek, memberByXF, getClaimMaskRecord, saveLastInviter },
        data() {
            return {
                userInfo: userInfoGet(),
                goName: '好礼周周领',
                getURL: '/mall',
                ifShowRule: false,
                ifShowShare: false,
                ifshowQRC: false,
                showChannel: false,
                showTips: false,
                showPoints: false,
                goodsId: '',
                price: '',
                buyOrReceive: true,
                points: 0,
                channel: {
                    name: '',
                    tel: '',
                },
                channelApply: false,
                showQRC: true,
                shareImg: require('../../assets/mm/banner.png'),
            }
        },
        methods: {
            record () {
                let vm = this
                let params = {
                    memberId: vm.userInfo.id
                }
                getClaimMaskRecord(params, (data) => {
                    if (data.code === 1) {
                        if (data.payload.length === 0) {
                            vm.$toast('暂无领取记录')
                            return
                        } else {
                            vm.$router.push('/record')
                        }
                    } else {
                        vm.$toast('暂未请求到数据,请稍后再试')
                    }
                })
            },
            buyNow () {
                let vm = this
                sessionStorage.removeItem('receiveGoods')
                // vm.$router.push('/faciaMaskPay/' + vm.goodsId)
                location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2FfaciaMaskPay%2F' + vm.goodsId + '&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect'
            },
            receive () {
                let vm = this
                vm.$router.push('/receiveGoodses')
            },
            share () {
                let vm = this
                vm.ifShowShare = true
            },
            hiddenRule () {
                this.ifShowRule = false
            },
            hiddenShare () {
                this.ifShowShare = false
            },
            hiddenQRC () {
                this.ifshowQRC = false
            },
            rule () {
                this.ifShowRule = true
            },
            giveUpChannel () {
                this.showChannel = false
                this.ifshowQRC = true
            },
            applyChannel () {
                this.channelApply = true
            },
            turnPoints () {
                this.$router.push('/points')
            },
            closePoints () {
                this.showPoints = false
            },
            closeButton () {
                this.showChannel = false
                this.ifshowQRC = true
            },
            closeTips () {
                this.showTips = false
                this.ifshowQRC = true
            },
            apply () {
                let vm = this
                if (!vm.channel.name) {
                    vm.$toast('请输入姓名！')
                    return
                }
                if (!vm.channel.tel) {
                    vm.$toast('请输入电话！')
                    return
                }
                let reg = /^1\d{10}$/
                if (!reg.test(vm.channel.tel)) {
                    vm.$toast('请输入正确的手机号')
                    return
                }
                let params = {
                    memberId: vm.userInfo.id,
                    xFansName: vm.channel.name,
                    phone: vm.channel.tel,
                }
                memberByXF(params, (data) => {
                    if (data.code === 1) {
                        vm.$toast(data.msg)
                        setTimeout(() => {
                            vm.showChannel = false
                            vm.ifshowQRC = true
                        }, 1000);
                    } else {
                        vm.$toast(data.msg)
                        setTimeout(() => {
                            vm.showChannel = false
                            vm.ifshowQRC = true
                        }, 1000);
                    }
                })
            },
            qrc () {
                let vm = this
                var element = document.body
                element.scrollIntoView(false)
                vm.showQRC = false
            },
        },
        mounted() {
            let vm = this
            document.body.style.paddingBottom = '50px'
            if (sessionStorage.getItem('inviterID')) {
                let paramss = {
                    memberId: vm.userInfo.id,
                    inviterId: sessionStorage.getItem('inviterID')
                }
                saveLastInviter(paramss, (data) => {
                    if (data.code === 1) {
                        console.log(data.msg)
                    }
                })
            }
            var Sdata = {
                //分享请求配置
                gotoPage: vm.$route.path,
                //邀请者链接         
                inviterID: vm.userInfo.id,  //链接带的参数
                type: 1,
                desc: '买一盒送两年，众多好礼周周领，邀好友参与还有奖励哦。',
                //链接图片（小图）     
                imgUrl: vm.shareImg,
                //邀请话
                shareTitle: '【' + vm.userInfo.nick + '】' + '邀您参与乐销商城好礼周周领活动',
            }
            WXShare.topShare(Sdata)
            let param = {
                memberId: vm.userInfo.id
            }
            isBuyMask(param, (data) => {
                if (data.code === 1) {
                    if (data.payload === true) {
                        vm.buyOrReceive = false
                    }
                } else {
                    vm.$toast('暂未请求到数据,请稍后再试')
                }
            })
            let params = {
                productType: -5,
                runType: 0,
                limit: 1,
                offset: 0,
                likeStr: '',
                sidx: 'createTime',
                sord: 'DESC',
            }
            product(params, (data) => {
                if (data.code === 1) {
                    vm.goodsId = data.payload[0].defaultSKUId
                    vm.price = data.payload[0].defaultPrice / 100
                    if (sessionStorage.getItem('applyChannel')) {
                        if (JSON.parse(sessionStorage.getItem('applyChannel')).channel) {
                            vm.showChannel = true
                        } else {
                            vm.showTips = true
                        }
                        sessionStorage.removeItem('applyChannel')
                    }
                    if (sessionStorage.getItem('getPoints')) {
                        vm.points = JSON.parse(sessionStorage.getItem('getPoints')).points
                        vm.showPoints = true
                        sessionStorage.removeItem('getPoints')
                    }
                } else {
                    vm.$toast('暂未请求到数据,请稍后再试')
                }
            })
        },
        filters: {
            formatDate(input) {
                var d = new Date(input)
                var year = d.getFullYear()
                var month = d.getMonth() + 1
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
                var hour = d.getHours()
                var minutes = d.getMinutes()
                var seconds = d.getSeconds()
                return year + '.' + month + '.' + day
            },
        },
    }
</script>
<style scoped>
.rulePage{
    width: 100%;
    height: 100%;
    z-index: 5;
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,.7);
}
.ruleLogo{
    position: absolute;
    top: 8%;
    right: 10%;
    width: 76%;
    z-index: 6;
}
.ruleWords{
    position: absolute;
    width: 76%;
    height: 100%;
    right: 10%;
    top: 8%;
    z-index: 6;
}
.ruleTitle{
    margin: -2.5% 10% 0 0;
    letter-spacing: .1rem;
    color: #705233;
    font-size: 1.1rem;
    font-weight: bold;
}
.ruleContain{
    height: 72%;
    margin: 12% 12% 0% 0%;
    font-size: .7rem;
    text-align: left;
    overflow: auto;
}
.rTitle{
    color: #A07546;
    margin-bottom: 5%;
}
.rTitle2{
    margin-top: 10%;
}
.ruleLine{
    transform: scale(.9,.9);
    line-height: 1.4rem;
    margin: 0 -5%;
    color: #333;
}
table{
    border-collapse:collapse;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 5%;
    transform: scale(.9,.9);
}
table td{
    border: 1px solid #000;
    height: 1.6rem;
}
.ruleLogo img{
    width: 100%;
}
.closeBtn{
    position: absolute;
    width: 12%;
    top: 0%;
    right: -1%;
}
.closeBtn img{
    width: 100%;
}
.sharePage{
    width: 100%;
    height: 100%;
    z-index: 5;
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,.7);
}
.shareLogo{
    position: absolute;
    top: 2%;
    right: 5%;
    width: 60%;
    z-index: 6;
}
.shareWords{
    position: absolute;
    top: 25%;
    left: 0%;
    width: 92%;
    font-size: .7rem;
    color: #593E31;
    /* background-color: rgba(0,177,171,0.2); */
    z-index: 7;
    display: flex;
    justify-content: center;
    transform: scale(.9,.9);
}
.shareContain>div{
    margin-top: .15rem;
}
.QRCLogo{
    position: absolute;
    top: 44%;
    margin: 0 auto;
    left: 0;
    right: 0%;
    width: 56%;
    z-index: 6;
}
.QRCLogo img{
    width: 100%;
    height: 100%;
}
.shareLogo img{
    width: 100%;
}
.smallLogo{
    width: 2.5rem;
    position: fixed;
    top: 33%;
    right: 3%;
}
.smallLogo img{
    width: 100%;
    height: 100%;
}
.qrc{
    transform: scale(1.4,1.4);
    margin-top: 100%;
}
.channelBg{
    width: 100%;
    height: 100%;
    z-index: 5;
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,.7);
}
.channel{
    margin: 30% auto 0;
    width: 70%;
    position: relative;
}
.channel img{
    width: 100%;
    height: 100%;
}
.channelWords{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    color: #FFDB84;
    font-size: .7rem;
    letter-spacing: .05rem;
}
.channelWords>div:first-child{
    font-size: .8rem;
    position: absolute;
    top: 32%;
    margin: auto;
    text-align: center;
    width: 100%;
    font-size: 1rem;
}
.channelWords>div:nth-child(2){
    font-size: .7rem;
    position: absolute;
    top: 41%;
    margin: auto;
    text-align: center;
    width: 100%;
    transform: scale(.9,.9);
}
.channelWords>div:nth-child(3){
    position: absolute;
    top: 58%;
    margin: auto;
    text-align: center;
    width: 100%;
}
.channelWords>div:last-child{
    position: absolute;
    top: 74%;
    margin: auto;
    text-align: center;
    width: 100%;
}
.channelBtn{
    display: flex;
    width: 100%;
    justify-content: center;
}
.channelBtn>div{
    border: 1px solid #FFDB84;
    width: 30%;
    height: 1.3rem;
    line-height: 1.4rem;
    margin: 0 .3rem;
}
.channelBtn>div:last-child{
    background-color: #FFDB84;
    color: #D62F2F;
}
.channelBtn span{
    display: inline-block;
    transform: scale(.9,.9);
}
.channelApply{
    margin: 16% auto 0;
    width: 76%;
    position: relative;
}
.closeButton{
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.7rem;
    color: #D62F2F;
    top: 20%;
    right: 0;
    border-radius: .8rem;
    background-color: #fff;
    font-size: 1.6rem;
    font-weight: 100;
}
.channelApply img{
    width: 100%;
    height: 100%;
}
.channelApplyWords{
    width: 100%;
    height: 25%;
    top: 49%;
    position: absolute;
    /* border: 1px solid blue; */
}
.tipWords{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    color: #FFDB84;
    font-size: .7rem;
    letter-spacing: .05rem;
}
.tipWords>div:first-child{
    font-size: .8rem;
    position: absolute;
    top: 32%;
    margin: auto;
    text-align: center;
    width: 100%;
    font-size: 1rem;
}
.tipWords>div:nth-child(2){
    font-size: .7rem;
    position: absolute;
    top: 41%;
    margin: auto;
    text-align: center;
    width: 100%;
    transform: scale(.9,.9);
}
.tipWords>div:nth-child(3){
    position: absolute;
    top: 58%;
    margin: auto;
    text-align: center;
    width: 100%;
}.tipWords>div:nth-child(4){
    position: absolute;
    top: 64%;
    margin: auto;
    text-align: center;
    width: 100%;
}
.tipWords>div:last-child{
    position: absolute;
    top: 76%;
    margin: auto;
    text-align: center;
    width: 100%;
}
.inputInfo{
    width: 100%;
    height: 100%;
    /* border: 1px solid aqua; */
}
.inputInfo input{
    border: none;
    outline: none;
    width: 60%;
    border-radius: 2rem;
    background-color: #7F7F7F;
    height: 1.9rem;
    padding: 0 1rem;
    margin-bottom: 8%;
    color: #fff;
}
input::placeholder{
    color: #fff;
    font-size: .7rem;
}
.channelApplyWords>div:nth-child(2){
    font-size: .7rem;
    transform: scale(.8,.85);
    color: #D62F2F;
}
.channelApplyWords>div:nth-child(3){
    font-size: .7rem;
    font-weight: bold;
    width: 40%;
    height: 2rem;
    line-height: 2rem;
    border-radius: 2rem;
    background-color: #fff;
    color: #EA1F0F;
    margin: 10% auto 0;
}
.pointsBg{
    width: 100%;
    height: 100%;
    z-index: 5;
    position: fixed;
    top: 0;
    background-color: rgba(0,0,0,.7);
    color: #333;
}
.points{
    margin: 30% auto 0;
    width: 80%;
    position: relative;
}
.points img{
    width: 100%;
    height: 100%;
}
.pointsWords{
    width: 82%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-size: .8rem;
}
.pointsWords>div:first-child{
    transform: scale(.9,.9);
    position: absolute;
    top: 34%;
}
.pointsWords>div:nth-child(2){
    position: absolute;
    /* top: 46%; */
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.specialColor{
    color: #FB5638;
    font-size: 2.4rem;
    font-weight: bold;
    padding-bottom: .5rem;
}
.specialColor_{
    color: #FB5638;
    margin: 0 .1rem 0 .05rem;
}
.specialColor__{
    color: #5C3402;
}
.pointsWords>div:nth-child(3){
    position: absolute;
    /* top: 60%; */
    top: 64%;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    transform: scale(.8,.8);
    color: #888;
}
.pointsWords>div:last-child{
    position: absolute;
    top: 84%;
    left: 0;
    right: 0;
    margin: auto;
    width: 44%;
    color: #7E4813;
}
.bigImg{
    width: 100%;
}
.bigImg img{
    width: 100%;
    height: 100%;
    display: block;
}
.bigImg>div:last-child{
    width: 100%;
    background-color: #fff;
}
.bigImg>div:last-child div{
    width: 40%;
    margin: 0 auto;
}
.buy{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
}
.share{
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background: linear-gradient(0deg,#B8A35E,#FFE695);
    -moz-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    -webkit-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    color: #fff;
    font-size: 1.05rem;
    font-weight: bold;
}
.buyNow{
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background: linear-gradient(0deg,rgba(226,35,25,1),rgba(253,55,8,1));
    -moz-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    -webkit-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    color: #fff;
    font-size: 1.05rem;
    font-weight: bold;
}
.receiveBtn{
    background: linear-gradient(0deg,#000,#333);
    position: relative;
}
.receiveTips{
    position: absolute;
    top: -20%;
    right: -1.5%;
    width: 30%;
    height: 1.4rem;
    line-height: 1.4rem;
    border-radius: 1rem; 
    background-color: #E62B2B;
    color: #fff;
    font-weight: 100;
    font-size: .7rem;
    transform: scale(.9,.9);
}
</style>